import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import {
  AppBar, Tabs, Tab, Card, makeStyles,
} from '@material-ui/core';
import LikedList from './components/likedList';
import CommentList from './components/commentList';
import Empty from './components/empty';
import {
  getLikedMessageByUserId,
  getCommentArticleMessageByUserId,
  getSystemMessageByUserId,
  getFocusMessageByUserId,
} from '../../api/actions/user';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  avatar: {
    // backgroundColor: red[500],
  },
  appBar: {
    marginBottom: theme.spacing(2),
  },
}));

function TabPanel(props) {
  const {
    children, value, index, ...other
  } = props;

  return <div {...other}>{value === index && <div>{children}</div>}</div>;
}

const MessagePage = (props) => {
  const { user } = props;
  const [tab, setTab] = useState(0);

  const [commentMessage, setCommentMessage] = useState();
  const [likedMessage, setLikedMessage] = useState();

  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setTab(newValue);
  };

  useEffect(() => {
    let fetchData;
    switch (tab) {
      case 0:
        fetchData = async () => {
          const result = await getCommentArticleMessageByUserId({
            id: user.id,
          });
          if (result.code === 0) {
            setCommentMessage(result.data);
          }
        };
        fetchData();
        break;
      case 1:
        fetchData = async () => {
          const result = await getLikedMessageByUserId({
            id: user.id,
          });
          if (result.code === 0) {
            setLikedMessage(result.data);
          }
        };
        fetchData();
        break;
      case 2:
        fetchData = async () => {
          const result = await getFocusMessageByUserId({
            id: user.id,
          });
          console.log(result);
        };
        fetchData();
        break;
      case 3:
        fetchData = async () => {
          const result = await getSystemMessageByUserId({
            id: user.id,
          });
          console.log(result);
        };
        fetchData();
        break;

      default:
        break;
    }
  }, [tab]);

  return (
    <>
      <AppBar position="static" className={classes.appBar}>
        <Tabs value={tab} onChange={handleChange}>
          <Tab label="评论消息" />
          <Tab label="点赞消息" />
          <Tab label="关注消息" />
          <Tab label="系统推送" />
        </Tabs>
      </AppBar>
      <TabPanel value={tab} index={0}>
        <Card>
          <CommentList data={commentMessage} />
        </Card>
      </TabPanel>
      <TabPanel value={tab} index={1}>
        <Card>
          <LikedList data={likedMessage} />
        </Card>
      </TabPanel>
      <TabPanel value={tab} index={2}>
        <Card>
          <Empty />
        </Card>
      </TabPanel>
      <TabPanel value={tab} index={3}>
        <Card>
          <Empty />
        </Card>
      </TabPanel>
    </>
  );
};

const mapStateToProps = (state) => ({
  user: state.user,
});

export default connect(mapStateToProps, null)(MessagePage);
